<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="text-align: right">
                <!--<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>-->
                <!--<el-button type="primary" icon="search" @click="search">搜索</el-button>-->
                <el-button type="primary" @click="add" style="">添加试卷模板</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="name" label="模板名称"></el-table-column>
                <el-table-column prop="total_score" label="试卷总分"></el-table-column>
                <el-table-column prop="create_time" sortable label="创建日期"></el-table-column>
                <el-table-column prop="start_time" sortable label="开始"></el-table-column>
                <el-table-column prop="end_time" sortable label="结束"></el-table-column>
                <el-table-column label="状态" width="150">
                    <template slot-scope="scope">
                        <span>
                            <!--{{scope.row.state==0?'启用':'禁用'}}-->
                            <el-switch
                                v-model="scope.row.status==0"
                                @click.native="openClose(scope.row)"
                                active-text="启用"
                                inactive-text="禁用">
                            </el-switch>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="create_user_name" label="创建人"></el-table-column>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template slot-scope="scope">
                        <div>
                            <div style="display: inline-block;" v-show="scope.row.is_start_test==='0'">
                                <el-button type="text" icon="el-icon-check" style="color: #13ce66;" @click="openPaper(scope.$index, scope.row)">开启考试</el-button>
                                <el-button type="text" icon="el-icon-edit" @click="handleEdit2(scope.$index, scope.row)">出题规则</el-button>
                                <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </div>
                            <div v-show="scope.row.is_start_test==='1'">
                                <el-button type="text" icon="el-icon-search" @click="getQrCode(scope.$index, scope.row)">二维码</el-button>
                                <a download="true" style="margin:0 0.5rem;" class="el-icon-document" :href="URL+'/admin/examinationmode/downLoadScore?id='+scope.row.id">下载成绩</a>
                                <el-button type="text" icon="el-icon-edit" class="red" @click="editScope(scope.$index, scope.row)">权限</el-button>
                                <el-button type="text" class="red" icon="el-icon-remove-outline" @click="closePaper(scope.$index, scope.row)">停止考试</el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalRow">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="试卷模板编辑" :visible.sync="editVisible" width="50%">
            <paperAdd :uid="roleId" ref="roleAdd" @done="roleDone"></paperAdd>
        </el-dialog>
        <!-- 模板规则弹出框 -->
        <el-dialog title="提取规则编辑" :visible.sync="editVisible2" width="50%">
            <paperRule :uid="roleId" ref="paperRule" @done="roleDone"></paperRule>
        </el-dialog>
        <!-- 开始考试弹出框 -->
        <el-dialog title="设置试卷权限" :visible.sync="editVisible3" width="50%">
            <paperAuhtor :uid="roleId" ref="paperAuthor" @done="roleDone"></paperAuhtor>
        </el-dialog>
        <!-- 修改权限弹出框 -->
        <el-dialog title="修改试卷权限" :visible.sync="editVisible4" width="50%">
            <paperAuhtor2 :uid="roleId" ref="setAuthor" @done="roleDone"></paperAuhtor2>
        </el-dialog>

        <!-- 二维码弹出框 -->
        <el-dialog title="考试二维码" :visible.sync="qrCodeShow" width="30%">
            <div style="text-align: center;">
                <div id="qrcodeBox" style="display: inline-block;"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import paperAdd from '@/components/module1/test-paper-add'
    import paperRule from '@/components/module1/Test-paper-rule'
    import paperAuhtor from '@/components/module1/set-paper-author'
    import paperAuhtor2 from '@/components/module1/set-paper-author2'
    export default {
        components:{
            paperAdd,
            paperRule,
            paperAuhtor,
            paperAuhtor2
        },
        name: 'test-paper',
        data() {
            return {
                select_word: '',
                tableData: [],
                pageSize: 0,
                totalRow: 0,
                currentPage: 1,
                multipleSelection: [],
                editVisible: false,
                editVisible2: false,
                editVisible3: false,
                editVisible4: false,

                roleId: '',

                qrCodeShow: false,  // 显示二维码
                qrCodeImg: '',

                URL: URL,
            }
        },
        computed: {
            data() {
            },
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 改变pageSize
            handleSizeChange(){},
            // 分页导航
            handleCurrentChange(val) {
                this.getData(val);
            },
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.post('/admin/examinationmode/findPage', {
                    pageNum: pageNumber?pageNumber:1,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.pageNumber = res.data.page.pageNumber;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            search() {
            },
            // 启用禁用
            openClose(row){
                this.config.post('/admin/examinationmode/isEnable', {id: row.id}).then(res=>{
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData();
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 添加角色
            add(){
                this.editVisible = true;
                this.roleId = '';
                setTimeout(()=>{
                    this.$refs.roleAdd.getInfo();
                }, 100);
            },
            // 编辑角色
            handleEdit(index, row) {
                this.editVisible = true;
                this.roleId = row.id;
                setTimeout(()=>{
                    this.$refs.roleAdd.getInfo(row);
                }, 100);
            },
            // 设置规则
            handleEdit2(index, row) {
                this.editVisible2 = true;
                this.roleId = row.id;
                setTimeout(()=>{
                    this.$refs.paperRule.getInfo(row);
                }, 100);
            },
            // 开启考试
            openPaper(index, row){
                // this.editVisible3 = true;
                // this.roleId = row.id;
                // setTimeout(()=>{
                //     this.$refs.paperAuthor.getInfo();
                // }, 100);
                let url = '/admin/examinationmode/startTest';
                this.loadopen();
                this.config.post(url, {
                    id: row.id,
                }).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.getData();
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                    this.$emit('done', '');
                });
            },
            // 停止考试
            closePaper(index, row){
                this.$confirm('确定停止该考试?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post3('/admin/examinationmode/stopTest', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            // 考试开始后设置考试范围
            editScope(index, row){
                this.editVisible4 = true;
                this.roleId = row.id;
                setTimeout(()=>{
                    this.$refs.setAuthor.getInfo();
                }, 100);
            },
            handleDelete(index, row) {
                this.$confirm('确定删除此模板?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/admin/examinationmode/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            roleDone(str) {
                this.editVisible = false;
                this.editVisible3 = false;
                this.editVisible4 = false;
                this.getData();
            },
            // 保存编辑
            goDetail(index, row) {
                this.$router.push({path: '/module1/question', query: {paperId: row.id}})
            },
            // 生成考试二维码
            getQrCode(index, row){
                // this.loadopen();
                // this.config.post('/admin/questionbank/isCreateQrCode', {questionBankId: row.id}).then(res=>{
                //     this.loadclose();
                //     if(res.data.code==='0'){
                //         this.buildCode(row);
                //     } else {
                //         this.$message.error(res.data.message);
                //     }
                // });
                this.buildCode(row);
            },
            buildCode(row){
                this.qrCodeShow = true;
                setTimeout(s=>{
                    document.getElementById('qrcodeBox').innerHTML = '';
                    let el = document.createElement('div');
                    el.id = 'qrcode';
                    document.getElementById('qrcodeBox').appendChild(el);
                    // var qrcode = new QRCode("qrcode");
                    var qrcode = new QRCode("qrcode", {
                        // text: "http://www.runoob.com",
                        width: 200,
                        height: 200,
                        colorDark : "#409EFF",
                        colorLight : "#ffffff",
                        correctLevel : QRCode.CorrectLevel.H
                    });
                    qrcode.makeCode(CodeURL+'/#/examLogin?id='+row.id);
                }, 300);
            },
            // 下载成绩单
            downRecored(index, row){
                this.loadopen();
                this.config.post2('/admin/examinationmode/downLoadScore', {id: row.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            }
        },
        mounted(){
            this.getData(1);
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
